import { settings, moveGroup, setGroup } from "../settings";
import { sortersName } from "../histories";
import { suggestsOrigins, suggestSourceNames } from "../suggest";
import SettingCheck from "./SettingCheck";
import SettingRange from "./SettingRange";
import SettingSelect from "./SettingSelect";
import { Eye, EyeOff, ChevronsUp, ChevronsDown } from "lucide-preact";

const SearchSettings = () => (
  <>
    {[
      ["top", "顶部留白", 0, 80, 0.1],
      ["logoWidth", "展开时 Logo 宽度", 10, 300, 1],
      ["logoHeight", "展开时 Logo 高度", 10, 300, 1],
      ["logoRadius", "Logo 圆角", 0, 1, 0.05],
    ].map(([key, name, min, max, step]) => (
      <SettingRange
        key={key}
        area="searchPart"
        prop={key}
        desp={name}
        min={min}
        max={max}
        step={step}
        look
      />
    ))}
    <SettingCheck
      area="searchPart"
      prop="logoVendor"
      desp="使用浏览器提供的 Logo"
    />
    <div class="divider divider-secondary">搜索框</div>
    {[
      ["newTab", "新窗口打开搜索结果"],
      ["showEngine", "显示搜索引擎栏"],
    ].map(([property, name]) => (
      <SettingCheck
        key={property}
        area="searchPart"
        prop={property}
        desp={name}
      />
    ))}
    {[
      ["width", "搜索框宽度", 40, 100, 0.1],
      ["radius", "搜索框圆角", 0, 1, 0.05],
    ].map(([key, name, min, max, step]) => (
      <SettingRange
        key={key}
        area="searchPart"
        prop={key}
        desp={name}
        min={min}
        max={max}
        step={step}
        look
      />
    ))}
    <SettingSelect
      area="searchPart"
      prop="leftButton"
      desp="搜索框左侧按钮"
      options={["无", "收藏筛选", "搜索引擎菜单"]}
    />
    {[
      ["showButtonAtEmpty", "在搜索框为空时显示搜索按钮"],
      ["caseInsensitive", "筛选收藏和历史时忽略字母大小写"],
    ].map(([property, name]) => (
      <SettingCheck
        key={property}
        area="searchPart"
        prop={property}
        desp={name}
      />
    ))}
    <div class="divider divider-secondary">搜索建议</div>
    <SettingCheck
      key="showSuggest"
      area="searchPart"
      prop="showSuggest"
      desp="显示搜索建议框"
    />
    <ul class="list w-full">
      {settings.value.searchPart.suggestSources.map(({ id, show, max }) => (
        <li class="list-row place-items-center p-1" key={id}>
          <label class="swap swap-rotate">
            <input
              type="checkbox"
              checked={show}
              onChange={(event) => {
                setGroup(
                  id,
                  event.target.checked,
                  "searchPart",
                  "suggestSources",
                );
              }}
            />
            <EyeOff class="swap-off" />
            <Eye class="swap-on" />
          </label>
          <button
            class="btn btn-xs btn-ghost btn-wide"
            onClick={() => {
              const value = Number.parseInt(
                prompt(
                  `${suggestSourceNames[id]}显示数量 (0 ~ 30) 0 为不限制`,
                  max,
                ),
                10,
              );
              if (!Number.isNaN(value) && value >= 0 && value <= 30) {
                setGroup(id, value, "searchPart", "suggestSources", "max");
              }
            }}
          >
            {suggestSourceNames[id]}{" "}
            <div class="badge badge-xs w-7 px-[0]">{max}</div>
          </button>
          <div class="join *:btn-soft *:btn-sm *:btn-square">
            <button
              class="btn btn-info join-item"
              onClick={() => {
                moveGroup(id, true, "searchPart", "suggestSources");
              }}
            >
              <ChevronsUp />
            </button>
            <button
              class="btn btn-info join-item"
              onClick={() => {
                moveGroup(id, false, "searchPart", "suggestSources");
              }}
            >
              <ChevronsDown />
            </button>
          </div>
        </li>
      ))}
    </ul>
    <SettingRange
      area="searchPart"
      prop="suggestTimeout"
      desp="搜索建议获取超时 毫秒"
      min={500}
      max={5000}
      step={50}
    />
    {[
      ["suggestHeightP", "搜索建议高度 竖屏"],
      ["suggestHeightPK", "搜索建议高度 竖屏 输入法"],
      ["suggestHeightL", "搜索建议高度 横屏"],
      ["suggestHeightLK", "搜索建议高度 横屏 输入法"],
    ].map(([key, name]) => (
      <SettingRange
        key={key}
        area="searchPart"
        prop={key}
        desp={name}
        min={0}
        max={600}
        step={1}
      />
    ))}
    <SettingSelect
      area="searchPart"
      prop="suggestFrom"
      desp="搜索建议来源"
      options={suggestsOrigins}
    />
    <SettingSelect
      area="searchPart"
      prop="historySorter"
      desp="搜索历史排序"
      options={sortersName}
    />
    <SettingCheck
      area="searchPart"
      prop="suggestIcon"
      desp="显示建议类型图标"
    />
  </>
);

export default SearchSettings;
